<template>
    <div>
      <van-loading v-show="loading" type="spinner" size="24px" />
      <van-uploader v-show="!loading" class="uploader" multiple v-model="fileList"/>
    </div>
</template>
<script>
var JSZip = require("jszip");
export default {
  name: "TopTools",
  props: {
    fileid: {
      type: String | Number,
      default: ''
    }
  },
  components: {

  },
  data () {
    return {
      loading: false,
      fileList: [],
      changed: false,
      orignSize: 0
    };
  },
  methods: {
    getBase64Image (img) {
      var canvas = document.createElement("canvas");
      canvas.width = img.width;
      canvas.height = img.height;
      var ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0, img.width, img.height);
      var dataURL = canvas.toDataURL("image/png");
      return dataURL;
      // return dataURL.replace("data:image/png;base64,", ""); 
    },
    loadImg (url, filename) {
      var vm = this;
      if (filename.endsWith('.zip') || filename.endsWith('.ZIP')) {
        this.unzipFiles(url);
        return;
      }
      vm.loading = true;
      let img = document.createElement('img');
      let request = new XMLHttpRequest();
      request.responseType = 'blob';
      request.open('get', url, true);

      request.setRequestHeader('requestType', 'app');
      request.setRequestHeader('applyID', '95b71316cebe4a18906066d9799faa59');
      request.setRequestHeader('secretKey', '13FFDB8B49D6568D78EB907AFBB6C17D');
      request.setRequestHeader('accessToken', this.$db.get('accessToken'));

      request.onreadystatechange = e => {
        if (request.readyState == XMLHttpRequest.DONE) {
          vm.loading = false;
          if (request.status == 200) {
            img.src = URL.createObjectURL(request.response);
            img.onload = () => {
              URL.revokeObjectURL(img.src);
              var dataURL = vm.getBase64Image(img);
              this.fileList = [{
                file: vm.$util.dataURLtoFile(dataURL, filename),
                content: this.getBase64Image(img),
                isImage: 1,
                isOrigin: 1
              }];
              vm.orignSize = 1;
            };
          }
        }
      };
      request.send(null);
    },
    unzipFiles (url) {
      var vm = this;
      let request = new XMLHttpRequest();
      request.responseType = 'blob';
      request.open('get', url, true);
      request.setRequestHeader('requestType', 'app');
      request.setRequestHeader('applyID', '95b71316cebe4a18906066d9799faa59');
      request.setRequestHeader('secretKey', '13FFDB8B49D6568D78EB907AFBB6C17D');
      request.setRequestHeader('accessToken', this.$db.get('accessToken'));
      vm.loading = true;
      request.onreadystatechange = e => {
        if (request.readyState == XMLHttpRequest.DONE) {
          vm.loading = false;
          if (request.status == 200) {
            var zipfile = new JSZip();
            zipfile.loadAsync(request.response).then(function (zip) {
              var imgExt = [".png", ".jpg", ".jpeg", ".bmp", ".gif"];
              zip.forEach(file => {
                var isImage = imgExt.find(n => file.endsWith(n) || file.endsWith(n.toUpperCase()));
                if (isImage) {
                  Promise.all([zip.files[file].async("base64"), zip.files[file].async("blob")]).then(res => {
                    const [base64, blob] = res;
                    vm.fileList.push({
                      content: 'data:image/png;base64,' + base64,
                      isImage: 1,
                      file: new File([blob], file),
                      isOrigin: 1
                    });
                    vm.orignSize++;
                  });
                }
              });
            });
          }
        }
      };
      request.send(null);
    },
    isChanged: function () {
      if (this.loading) {
        return false;
      }
      if (this.fileList.length != this.orignSize) {
        return true;
      }
      if (this.fileList.find(n => !n.isOrigin)) {
        return true;
      }
      return false;
    }
  },
  mounted: function () {
    var vm = this;
    if (vm.fileid) {
      vm.$getAndLoad('图片', 'searchfileByIdJK.do?fileid=' + vm.fileid, function (data) {
        if (data.code == '1') {
          var filesrc = 'http://183.207.196.25:50087/ga/jygawebcitycrisis/JYGAWebCityCrisis/downloadfileJK.do?fileallname=' + data.data.fileallname;
          vm.loadImg(filesrc, data.data.fileallname);
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
